@import './base';
@import './vant';

@font-face {
  font-family: Roboto;
  src: url('../../public/fonts/Roboto/Roboto-Regular.ttf'), url('../../public/fonts/Roboto/Roboto-Regular.ttf');
}

:root:root {
  --van-red: var(--#{$ns}-color-danger);
  --van-blue: var(--#{$ns}-color-primary);
  --van-orange: var(--#{$ns}-color-warning);
  --van-orange-dark: var(--#{$ns}-color-warning);
  --van-orange-light: var(--#{$ns}-color-warning-light);
  --van-green: var(--#{$ns}-color-success);
  --van-text-color: var(--#{$ns}-text-color-primary);
  --van-text-color-2: var(--#{$ns}-text-color-regular);
  --van-text-color-3: var(--#{$ns}-text-color-secondary);
  --van-active-color: var(--#{$ns}-color-primary);
  --van-background: var(--#{$ns}-color-main-bg);
  --van-background-2: var(--#{$ns}-color-white);
  --van-border-color: var(--#{$ns}-border-color);
  --van-padding-xs: 8px;
  --van-padding-sm: 12px;
  --van-padding-md: 14px;
  --van-padding-lg: 16px;
  --van-padding-xl: 18px;
  --van-overlay-background: rgb(0 0 0 / 50%);
}

:root {
  --#{$ns}-color-primary: #1c9e82;
  --#{$ns}-color-sub-primary: #4e83fd;
  --#{$ns}-color-sub-primary-light: #80b7ef;
  --#{$ns}-color-sub-primary-extra-light: #d9ecff;
  --#{$ns}-color-white: #fff;
  --#{$ns}-color-success: #19ab58;
  --#{$ns}-color-success-light-4: #5ac2d8;
  --#{$ns}-color-success-light-7: #c6e6e0;
  --#{$ns}-color-warning: #ff6a00;
  --#{$ns}-color-warning-light: #f5af66;
  --#{$ns}-color-danger: #ee2625;
  --#{$ns}-color-danger-light: #e95e5e;
  --#{$ns}-color-main-bg: #f2f3f5;
  --#{$ns}-color-main-light: #f7f8fc;
  --#{$ns}-text-color-primary: #28282a;
  --#{$ns}-text-color-regular: #6a6b6d;
  --#{$ns}-text-color-secondary: #a5a7b3;
  --#{$ns}-text-color-placeholder: #c7c8d6;
  --#{$ns}-border-color: #e1e2e7;
  --#{$ns}-border-color-high: #d3d3d3;
  --#{$ns}-border-color-light: #f5f6f8;
  --#{$ns}-fill-color: #eff0f2;
  --#{$ns}-fill-color-light: #f2f3f5;
  --#{$ns}-fill-color-extra-light: #f7f8fc;
  --#{$ns}-font-size-base: 14px;
  --#{$ns}-font-size-small: 12px;
  --#{$ns}-font-size-medium: 14px;
  --#{$ns}-font-size-large: 16px;
  --#{$ns}-font-size-extra-large: 18px;
  --#{$ns}-font-size-max: 20px;
  --#{$ns}-font-size-extra-max: 24px;
  --#{$ns}-space-size-extra-mini: 6px;
  --#{$ns}-space-size-mini: 8px;
  --#{$ns}-space-size-small: 10px;
  --#{$ns}-space-size-base: 12px;
  --#{$ns}-space-size-medium: 14px;
  --#{$ns}-space-size-large: 16px;
  --#{$ns}-space-size-extra-large: 18px;
  --#{$ns}-space-size-max: 20px;
  --#{$ns}-space-size-extra-max: 24px;
  --#{$ns}-header-height: 46px;
  --#{$ns}-footer-height: 50px;
  --#{$ns}-fixed-top-content-height: 32px;
  --#{$ns}-select-height: 28px;
}

html,
body,
#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto hidden;
  font-size: var(--#{$ns}-font-size-base);
  color: var(--#{$ns}-text-color-primary);
  background-color: var(--#{$ns}-color-main-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

#layout {
  height: 100%;
}

// 内容区域高度
.maia-container__safe-area {
  height: calc(100% - var(--#{$ns}-header-height) - var(--#{$ns}-footer-height));

  &.hider-header-and-footer {
    height: 100%;
  }

  &.hider-header {
    height: calc(100% - var(--#{$ns}-footer-height));
  }

  &.hider-footer {
    height: calc(100% - var(--#{$ns}-header-height));
  }
}

@supports (height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top)) {
  .maia-container__safe-area {
    height: calc(100% - var(--#{$ns}-header-height) - var(--#{$ns}-footer-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    &.hider-header-and-footer {
      height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    &.hider-header {
      height: calc(100% - var(--#{$ns}-footer-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    &.hider-footer {
      height: calc(100% - var(--#{$ns}-header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  // 解决van-popup 开启 safe-area-inset-top 第一个元素padding不生效问题
  .maia-popup__safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
  }
}

.page-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--#{$ns}-space-size-base) var(--#{$ns}-space-size-medium);
}

// 通过css设置节流，防止按钮多次被点击
@keyframes throttle-frames {
  from {
    pointer-events: none;
  }

  to {
    pointer-events: all;
  }
}

.throttle {
  animation: throttle-frames 1s step-end forwards;

  &:active {
    animation: none;
  }
}

// 元素之前间距样式
.mb-12 {
  margin-bottom: var(--#{$ns}-space-size-base);
}

.mt-12 {
  margin-top: var(--#{$ns}-space-size-base);
}

.ml-12 {
  margin-left: var(--#{$ns}-space-size-base);
}

.mr-12 {
  margin-right: var(--#{$ns}-space-size-base);
}

.mb-10 {
  margin-bottom: var(--#{$ns}-space-size-small);
}

.mt-10 {
  margin-top: var(--#{$ns}-space-size-small);
}

.ml-10 {
  margin-left: var(--#{$ns}-space-size-small);
}

.mr-10 {
  margin-right: var(--#{$ns}-space-size-small);
}

.pb-12 {
  padding-bottom: var(--#{$ns}-space-size-base);
}

.pt-12 {
  padding-top: var(--#{$ns}-space-size-base);
}

.pl-12 {
  padding-left: var(--#{$ns}-space-size-base);
}

.pr-12 {
  padding-right: var(--#{$ns}-space-size-base);
}

.pb-10 {
  padding-bottom: var(--#{$ns}-space-size-small);
}

.pt-10 {
  padding-top: var(--#{$ns}-space-size-small);
}

.pl-10 {
  padding-left: var(--#{$ns}-space-size-small);
}

.pr-10 {
  padding-right: var(--#{$ns}-space-size-small);
}

// 提示色
.success {
  color: var(--#{$ns}-color-success);
}

.warning {
  color: var(--#{$ns}-color-warning);
}

.danger {
  color: var(--#{$ns}-color-danger);
}

.error {
  color: var(--#{$ns}-color-danger-light);
}

.one-line-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.two-line-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
